<template>
    <div class="app-container">
        <el-page-header @back="goBack" v-if="!flag">
        </el-page-header>
        <el-form v-if="flag"
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            label-width="auto"
            v-show="showSearch"
        >
            <el-row>
                <el-form-item label="调拨日期" style="width: 308px">
                    <el-date-picker
                        v-model="dateRange"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="调拨单编码" prop="allotNum">
                    <el-input
                        v-model.trim="queryParams.allotNum"
                        style="width: 180px"
                        placeholder="请输入调拨单编码"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="调纸类型" prop="allotType">
                    <el-select
                        style="width: 180px"
                        v-model="queryParams.allotType"
                        class="m-2"
                        placeholder="请选择调纸类型"
                    >
                        <el-option
                            v-for="item in ems_allot_detail_allot_type"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>

                <div class="operation">
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    <el-button @click="advanced = !advanced">
                        <a style="color: #448ef7">
                            <el-icon v-if="advanced">
                                <ArrowUpBold />
                            </el-icon>
                            <el-icon v-else>
                                <ArrowDownBold />
                            </el-icon>
                        </a>
                    </el-button>
                    <right-toolbar
                        style="margin-left: 10px"
                        :search="false"
                        v-model:showSearch="showSearch"
                        @queryTable="getList"
                        :columns="columns"
                    ></right-toolbar>
                </div>
            </el-row>
            <el-row v-if="advanced">
                <el-form-item label="调拨单位" prop="unitId">
                    <el-select
                        v-model="queryParams.unitId"
                        filterable
                        class="m-2"
                        placeholder="请选择单位"
                        style="width: 180px"
                    >
                        <el-option
                            v-for="item in customerList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="规格型号" prop="specs">
                    <el-select
                        style="width: 180px"
                        filterable
                        v-model="queryParams.specs"
                        class="m-2"
                        placeholder="请选择调纸类型"
                    >
                        <el-option
                            v-for="item in mes_paper_specs"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="纸张名称" prop="paperName">
                    <el-input
                        v-model.trim="queryParams.paperName"
                        style="width: 180px"
                        placeholder="请输入纸张名称"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="定量" prop="weight">
                    <el-input
                        type="number"
                        v-model.trim="queryParams.weight"
                        style="width: 180px"
                        placeholder="请输入定量"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
            </el-row>
        </el-form>

        <el-row :gutter="10" class="mb8" v-if="flag">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <div>
            <el-table
                v-loading="loading"
                border
                :data="dataList"
                :summary-method="getSummaries"
                show-summary
            >
                <el-table-column label="序号" width="60" type="index" align="center" />
                <el-table-column
                    v-if="columns[0].visible"
                    label="纸张调拨单编码"
                    min-width="180"
                    align="center"
                    prop="allotNum"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{ row }">
                        <el-button type="primary" @click="handleViewCode(row)" text>
                            {{ row.allotNum }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[1].visible"
                    label="调纸类型"
                    min-width="120"
                    align="center"
                    prop="allotType"
                >
                    <template #default="scope">
                        <dict-tag
                            :options="ems_allot_detail_allot_type"
                            :value="scope.row.allotType"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[2].visible"
                    label="调拨日期"
                    min-width="120"
                    align="center"
                    prop="allotDate"
                >
                    <template v-slot="{ row }">
                        {{ row.allotDate.split('T')[0] ?? '' }}
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[3].visible"
                    label="调拨单位"
                    min-width="120"
                    align="center"
                    prop="unitName"
                />
                <el-table-column
                    v-if="columns[4].visible"
                    label="纸张编码"
                    min-width="150"
                    align="center"
                    prop="code"
                >
                    <!-- <template v-slot="{ row }">
                        <el-button type="primary" @click="handleViewPaperCoding(row)" text>{{ row.code
                        }}</el-button>
                    </template> -->
                </el-table-column>

                <el-table-column
                    v-if="columns[6].visible"
                    label="纸张名称"
                    min-width="120"
                    align="center"
                    prop="paperName"
                />
                <el-table-column
                    v-if="columns[7].visible"
                    label="规格型号"
                    min-width="120"
                    align="center"
                    prop="specs"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_specs" :value="scope.row.specs" />
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[8].visible"
                    min-width="120"
                    label="品牌"
                    align="center"
                    prop="brand"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_brand" :value="scope.row.brand" />
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[9].visible"
                    width="100"
                    label="定量"
                    align="center"
                    prop="weight"
                />
                <el-table-column
                    label="幅宽"
                    v-if="columns[10].visible"
                    align="center"
                    prop="longWide"
                />
               
                <el-table-column
                    v-if="columns[12].visible"
                    width="120"
                    label="纸张纸型"
                    align="center"
                    prop="paperType"
                    :show-overflow-tooltip="true"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_type" :value="scope.row.paperType" />
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[13].visible"
                    width="100"
                    label="单位"
                    align="center"
                    prop="unit"
                    :show-overflow-tooltip="true"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_unit" :value="scope.row.unit" />
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[14].visible"
                    min-width="120"
                    fixed="right"
                    label="调拨数量"
                    align="center"
                    prop="total"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    v-if="columns[15].visible"
                    width="100"
                    label="经办人"
                    align="center"
                    prop="createBy"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    v-if="columns[16].visible"
                    label="备注"
                    align="center"
                    prop="detailRemark"
                    :show-overflow-tooltip="true"
                />
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script setup name="order">
import { getAllotDetaillist,exportAllotDetailDetail } from '@/api/storage/transfer.js'
import { listCustom } from '@/api/basicInfo/customer.js'
import { downLoadBlob } from '@/utils/ruoyi'
import useTagsViewStore from "@/store/modules/tagsView";
const tagsViewStore = useTagsViewStore();

const { proxy } = getCurrentInstance()
const loading = ref(true)
const dataList = ref([])
const showSearch = ref(true)
const router = useRouter()
const route = useRoute();
const total = ref(0)
const advanced = ref(false)
const customerList = ref([])
const totalSum = ref(0)
const flag=ref(true);
// 列显隐信息
const columns = ref([
    { key: 0, label: `纸张调拨单编码`, visible: true },
    { key: 1, label: `调张类型`, visible: true },
    { key: 2, label: `调拨日期`, visible: true },
    { key: 3, label: `调拨单位`, visible: true },
    { key: 4, label: `纸张编码`, visible: true },
    { key: 5, label: `自有编码`, visible: true },
    { key: 6, label: `纸张名称`, visible: true },
    { key: 7, label: `规格型号`, visible: true },
    { key: 8, label: `品牌`, visible: true },
    { key: 9, label: `定量`, visible: true },
    { key: 10, label: `规格长`, visible: true },
    { key: 11, label: `规格宽`, visible: true },
    { key: 12, label: `纸张纸型`, visible: true },
    { key: 13, label: `单位`, visible: true },
    { key: 14, label: `调拨数量`, visible: true },
    { key: 15, label: `经办人`, visible: true },
    { key: 16, label: `备注`, visible: true },
])

const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
})

const getDateNow = () => {
    var myDate = new Date()
    var year = myDate.getFullYear()
    var month = myDate.getMonth() + 1 //获取当前月份(0-11,0代表1月，所以要加1);
    var day = myDate.getDate() //获取当前日（1-31）
    if (month < 10) {
        month = '0' + month
    }
    if (day >= 0 && day <= 9) {
        day = '0' + day
    }
    var firstDay = year + '-' + month + '-01'
    return firstDay
}
const getCurrentDay = () => {
    var now = new Date()
    var year = now.getFullYear()
    var month = now.getMonth() + 1 // 月份从0开始，需要加1
    var day = now.getDate()
    if (month < 10) {
        month = '0' + month
    }
    if (day >= 0 && day <= 9) {
        day = '0' + day
    }
    const currentDay = year + '-' + month + '-' + day
    return currentDay
}
const dateRange = ref([getDateNow(), getCurrentDay()])
const { queryParams } = toRefs(data)
const {
    mes_paper_unit,
    mes_paper_type,
    mes_paper_specs,
    mes_paper_brand,
    ems_allot_detail_allot_type,
} = proxy.useDict(
    'mes_paper_unit',
    'mes_paper_type',
    'mes_paper_specs',
    'mes_paper_brand',
    'ems_allot_detail_allot_type'
)

//  返回
const goBack = () => {
  setTimeout(() => {
    router.go(-1);
    tagsViewStore.delView(route);
  }, 0);
};

const getList = () => {
    loading.value = true

    if(route.query?.code){
    queryParams.value.code=route.query.code;
    queryParams.value.startDate=route.query.startDate;
    queryParams.value.endDate=route.query.endDate;
    flag.value=false;
  }else{
    queryParams.value.startDate= Array.isArray(dateRange.value) ? dateRange.value[0] : undefined;
    queryParams.value.endDate=Array.isArray(dateRange.value) > 0 ? dateRange.value[1] : undefined;
  }
    getAllotDetaillist(queryParams.value)
        .then(res => {
            if (res.rows.length > 0) {
                totalSum.value = res.rows[0].totalSum
            }
            loading.value = false
            dataList.value = res.rows
            total.value = res.total
        })
        .catch(err => {
            loading.value = false
        })
}

// 合计
const getSummaries = param => {
    const { columns, data } = param
    const sums = []
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计'
            return
        }
        switch (column.property) {
            case 'total':
                sums[index] = totalSum.value
                break
            default:
                break
        }
    })
    return sums
}
// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1
    getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
    dateRange.value = [getDateNow(), getCurrentDay()]
    proxy.resetForm('queryRef')
    handleQuery()
}
// 查看调拨单
const handleViewCode = row => {
    router.push({
        path: '/storage/transfer',
        query: {
            code: row.allotNum,
        },
    })
}
// 供应商
// const handleViewSupplierCode = (row) => {
//     router.push({
//         path: '/basicInfo/supplier',
//         query: {
//             supplierCode: row.supplierCode,
//         }
//     })
// }
// 纸张
// const handleViewPaperCoding = (row) => {
//     router.push({
//         path: '/basicInfo/paperCoding',
//         query: {
//             code: row.code,
//         }
//     })
// }
const getCustomerList = () => {
    listCustom({ pageNum: 1, pageSize: 9999 }).then(res => {
        customerList.value = res.rows
    })
}
getCustomerList()
getList()

// 导出
const handleExport = () => {
    exportAllotDetailDetail({
            ...queryParams.value,
            startDate: Array.isArray(dateRange.value) ? dateRange.value[0] : undefined,
            endDate: Array.isArray(dateRange.value) > 0 ? dateRange.value[1] : undefined,
        }).then(res => {
        downLoadBlob(res, '纸张调拨明细')
    })
}
// router.beforeEach((to, from, next) => {
//     if (to.path == "/basicInfo/personnel") {
//         getList()
//     }
//     next();
// });
</script>

<style lang="scss" scoped>
.operation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
}
</style>
